<template>
    <div id="box">
        <h3>用户信息列表</h3>
        <div id="addBtn">
            <el-button type="primary" plain size="mini" @click="dialogFormVisible = true">新增</el-button>
        </div>

        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>

                    <el-popconfirm
                            title="确定删除吗？"
                            @confirm="handleDelete(scope.$index, scope.row)"
                    >
                        <el-button
                                slot="reference"
                                size="mini"
                                type="danger" >删除
                        </el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div id="page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <!--        弹出层-->
        <div>
            <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="姓名">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="form.address" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="日期">
                        <el-date-picker
                                v-model="form.date"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addUser">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </div>

</template>
<!--
        table表格数据渲染 需要满足的规则
        1.table标签中  绑定表格数据  :data="tableData"
        2. el-table-column  中
                 prop="date"  后期需要和后台接口中返回数据的属性名保持一致  [{date:'',name:''},{}]
                 label="日期"  表格在前端页面中显示的字段名
-->
<script>
    export default {
        name: 'IndexVIew',
        data() {
            return {
                total:40,
                dialogFormVisible: false,  // 控制弹出层显示 还是隐藏
                form: {
                    name:'root',
                    address:'合肥',
                    date:'2023-12-11'
                },
                pageSize: 10,
                currentPage: 1,
                tableData:
                    [{
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄'
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }]
            }
        },
        methods: {

            addUser() {
                //添加用户信息  ok
                console.log(this.form)
                this.form = {
                    name:'',
                    address:'',
                    date:''
                }
                this.dialogFormVisible = false;
            },
            // showAddForm() {
            //     //弹出层
            //     this.dialogFormVisible = true;
            // },
            handleEdit(index, row) {
                let {name, address, date} = row
                console.log(name)
                console.log(address)
                console.log(date)
            },
            handleDelete(index, row) {
                let {name, address, date} = row
                console.log(name)
                console.log(address)
                console.log(date)
            },
            handleSizeChange(val) {
                // 发送异步请求
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                // 发送异步请求
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            }
        }
    }
</script>

<style scoped>

    #box {
        width: 80%;
        margin: 100px auto;
    }

    h3 {
        box-sizing: border-box;
        padding-left: 500px;
        color: #409EFF;
    }

    #page {
        margin-top: 30px;
    }

    #addBtn {
        margin-bottom: 20px;
    }
</style>
